<template>
  <div>
    <div class="form-label2">
      <label>选项</label>
      <p>（在当前页面选中的答案为本题正确答案）</p>
    </div>
    <div class="third-indent mb-base">
      <el-select v-model="form.answer.yesOrNo" :disabled="readOnly" size="small" placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </div>
  </div>
</template>
  
<script>
// 判断题
const defaultForm = JSON.stringify({
  answer: { yesOrNo: 1 }
});
export default {
  name: "Judge",
  props: {
    initialVals: {
      type: Object,
      default: () => ({}),
    },
    clean: {
      type: String,
      default: '',
    },
    readOnly: {
      type: Boolean,
      default: false,
    },
    validate: {  // 触发内层表单校验
      type: String,
      default: ''
    }
  },
  data() {
    return {
      form: JSON.parse(defaultForm),
      options: [{
        value: 1,
        label: '正确'
      }, {
        value: 0,
        label: '错误'
      }]
    }
  },
  watch: {
    initialVals: {
      handler(val) {
        if (Object.keys(val).length > 0) this.form = { ...this.form, ...val };
      },
      immediate: true,
    },
    validate: {
      handler(val) {
        // TODO: 校验表单
        console.log(val);
        this.$emit('onValid', true);
      }
    },
    clean: {
      handler(val) {
        if (val) this.form = JSON.parse(defaultForm);
      }
    },
    form: {
      handler(val) {
        this.$emit('change', JSON.parse(JSON.stringify(val)));
      },
      deep: true
    }
  }
}
</script>
  
  <style lang="scss" scoped>
  @import './index.scss';
  </style>
    